<template>
    <!-- 销售属性 -->
    <div class="view_attribute_sales">
        <card :title="title">
            <template v-slot:actions>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    placeholder="按属性名查找"
                    prefix-icon="el-icon-search"
                    clearable
                />
                <el-button type="primary" @click="openLinkingDialog">关联产品分类</el-button>
            </template>
            <template v-slot:default>
                <el-table :data="tableData">
                    <el-table-column label="#" type="index" align="center" />
                    <el-table-column label="属性名" prop="attrName"></el-table-column>
                    <el-table-column label="可选值" prop="valueSelect"></el-table-column>
                    <el-table-column label="是否使用">
                        <template v-slot="{ row: { isUsed } }">
                            <el-tag :type="isUsed ? 'success' : 'info'">{{ isUsed ? '是' : '否' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="排序" prop="attrSort"></el-table-column>
                    <el-table-column label="操作">
                        <template v-slot="{ row }">
                            <el-button type="text" @click="edit(row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template v-slot:bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>

        <!-- 关联产品分类对话框 -->
        <el-dialog :visible.sync="visible" custom-class="linking">
            <unlinked-attribute :category-id="categoryId" :category-name="categoryName" @linked="query" />
        </el-dialog>

        <!-- 编辑属性对话框 -->
        <el-dialog :visible.sync="visible2" title="编辑属性">
            <template #default>
                <el-form label-position="top">
                    <el-form-item label="备选项">
                        <el-checkbox v-model="formData.isUsed">是否使用</el-checkbox>
                    </el-form-item>
                </el-form>
            </template>
            <template #footer>
                <el-button type="primary" @click="save">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getQueryOptions } from '../../mixins';
import unlinkedAttribute from '../components/attributes_sales_unlinked';

export default {
    data() {
        return {
            tableData: [],

            visible: false,
            visible2: false,

            formData: {
                isUsed: false,
            },
        };
    },

    components: { unlinkedAttribute },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/pms/findAttrSale',
            paginable: true,
            params: { queryString: 'attrName', categoryId: 'catalogId' },
        }),
    ],

    computed: {
        categoryId() {
            return +this.$route.query.categoryId;
        },

        categoryName() {
            return this.$route.query.categoryName || '';
        },

        title() {
            return this.categoryName + '销售和基本销售属性';
        },
    },

    watch: { categoryId: 'query' },

    methods: {
        // 关联产品分类
        openLinkingDialog() {
            this.visible = true;
        },

        // 编辑属性
        edit(row) {
            this.formData.attrId = row.attrId;
            this.formData.isUsed = row.isUsed;
            this.visible2 = true;
        },

        // 保存
        save() {
            this.$post(
                '/yxl/pms/updateAttrCatalogIsUsed',
                Object.assign({ catalogId: this.categoryId }, this.formData)
            ).then(res => {
                this.visible2 = false;
                this.query();
            });
        },
    },
};
</script>